<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--<link th:href="@{/ajax/libs/webuploader/webuploader.css}" rel="stylesheet"/>
<link th:href="@{/css/demo/webuploader-demo.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>-->
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
<body class="white-bg">
    <div class="ibox-content">
        <div class="form-horizontal m">
            <div class="form-group">
                <div class="alert alert-info" role="alert">note：The maximum number of files can not be more than ten <b style="color: red">10</b> in a single upload</div>
            </div>

            <div class="form-group">
                <form id="my-awesome-dropzone" class="dropzone">
                    <div class="dropzone-previews"></div>

                </form>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">remark：</label>
                <div class="col-sm-9">
                    <textarea type="text" name="" class="form-control" id="order_bz" placeholder="Please enter text"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12 col-sm-offset-3">
                    <button type="button" class="btn btn-primary" id="confirmBtn" data-loading-text="Loading..." onclick="upload()">submit</button>
                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
                </div>
            </div>
        </div>



    </div>

    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "module/ordersHead"
		$("#form-ordersHead-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			submitHandler: function(form) {
				$.operate.save(prefix + "/add", $('#form-ordersHead-add').serialize());
			}
		});
	</script>
    <script>
        //var BASE_URL = [[@{/ajax/libs/webuploader}]];
    </script>
    <!--<script th:src="@{/ajax/libs/webuploader/webuploader.js}"></script>
    <script th:src="@{/js/demo/webuploader-demo.js}"></script>-->
    <!-- DROPZONE -->
    <script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
    <script th:src="@{/js/plugins/layer/layer.min.js}"></script>
    <script>
        var jsonObj = {};
        jsonObj.excleList = [];

        Dropzone.autoDiscover = false;
        $(".dropzone").dropzone({
            url: ftp_url+"/module/ordersHead/FileUploadServlet", //必须填写
            method:"post",  //也可用put
            paramName:"exclefile", //默认为file
            addRemoveLinks: true,
            maxFiles:10,//一次性上传的文件数量上限
            maxFilesize: 20, //MB
            acceptedFiles: ".xls,.xlsx", //上传的类型
            parallelUploads: 3,
            dictMaxFilesExceeded: "You can upload up to 10 files！",
            dictResponseError: 'File upload failed!',
            dictInvalidFileType: "You cannot upload this type of file, the file type can only be *.xls,*.xlsx。",
            dictFallbackMessage:"The browser is not supported",
            dictFileTooBig:"File size too large to upload file maximum support.",
            init:function() {
                this.on("addedfile", function (file) {
                    //上传文件时触发的事件
                    var myDropzone = this;
                    var fileName = file.name;
                    //
                    var arr = jsonObj.excleList;
                    for( var i = 0; i < arr.length; i++ ){
                        if( arr[i].fileName == fileName ){
                            var index = layer.alert("The upload list contains duplicate files! If you confirm that you need to upload, please rename the file and proceed。",{
                                skin: 'layui-layer-lan',
                                closeBtn: 0
                            },function () {
                                myDropzone.removeFile(file);
                                layer.close(index);
                            });
                            break;
                        }
                    }
                    return;
                });
                this.on("queuecomplete", function (file) {
                    //上传完成后触发的方法
                });
                this.on("removedfile", function (file) {
                    //删除文件时触发的方法
                    this.setupEventListeners();
                    var fileName = file.name;
                    var arr = jsonObj.excleList;
                    for( var i = arr.length-1; i >= 0; i-- ){
                        if( arr[i].fileName == fileName ){
                           if(this.getAcceptedFiles().length === this.options.maxFiles){break;}
                           jsonObj.excleList.splice( i, 1 );
                           break;
                        }
                    }
                });
                this.on("success", function(file,data){
                    var fileName = data.msg;
                    var fileUrl = data.detail;
                    var excleObj = {};

                    excleObj.fileName = fileName;
                    excleObj.fileUrl = fileUrl;
                    jsonObj.excleList.push(excleObj);
                });
                this.on('maxfilesreached', function() {
                    this.removeEventListeners();
                });
                this.on('cancled', function (file) {
                    
                });
                this.on('sending', function (file) {

                });
            }
        });

        function upload(){
            if( jsonObj.excleList.length == 0 ){
                layer.alert("Please upload at least one Excel file。",{
                    skin: 'layui-layer-lan',
                    closeBtn: 1
                });
                return;
            }
            var loadIndex;
            var $btn;
            $.ajax({
                url: '/module/ordersHead/uploadOrder',
                dataType: 'json',
                type: 'POST',
                data: {
                    'list' : JSON.stringify(jsonObj.excleList),
                    'bz' : $("#order_bz").val()
                },
                success: function(data){
                    $.operate.saveSuccess(data);
                },
                error: function (data) {
                    $.modal.alertError("system error");
                },
                beforeSend: function (data) {
                    $btn = $('#confirmBtn').button('loading');
                    loadIndex = layer.msg('Submitting data...', {
                        icon: 16
                        ,shade: 0.01
                        ,time: 0
                    });
                },
                complete: function (data) {
                    layer.close(loadIndex);
                    $btn.button('reset');
                }
            });
        }
    </script>
</body>
</html>
